<template>
  <view class="orderItem">
    <view class="head">
      <text>{{$t('clerk.orderNum')}}：{{ order.order_no }}</text>
<!--      <text :class="order.status > 0? 'complete':''">{{orderStatus(order.trade_status)}}</text> -->
    </view>
    <view class="goods">
      <view class="goodsList">
        <view class="goodItem" v-for="(item, index) in goodsList" :key="index">
          <view class="pic">
            <image :src="item.pic"></image>
          </view>
          <view class="info">
            <text class="name">{{ item.goods_name }}</text>
            <view class="sku">
              <text></text>
              <text>×{{ item.num }}</text>
            </view>
          </view>
        </view>
      </view>
      <view
        class="showMore"
        @click.stop="showMore = !showMore"
        v-if="order.goods_list.length > 1"
      >
        <text v-if="!showMore">{{$t('shareholder.showMore')}}</text>
        <text v-else>{{$t('shareholder.close')}}</text>
        <text class="iconfont icon-arrow-down" v-if="!showMore"></text>
        <text class="iconfont icon-arrow-up" v-else></text>
      </view>
    </view>
    <view class="foot">
      <view class="money">
        <text>{{ orderShareText(order.source) }}：</text>
        <text class="red">￥{{ order.money || 0 }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    order: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // 是否显示更多详情
      showMore: false,
    };
  },
  computed: {
    goodsList() {
      if (this.order.goods_list.length <= 1) {
        return this.order.goods_list;
      } else {
        if (!this.showMore) {
          return [this.order.goods_list[0]];
        } else {
          return this.order.goods_list;
        }
      }
    },
    orderStatus() {
      return status => {
        if(status == -1) {
          return this.$t('person.status1')
        } 
        if(status == 0) {
          return this.$t('person.status2')
        } 
        if(status == 1) {
          return this.$t('shop.cancled')
        } 
        if(status == 2) {
          return this.$t('admin.delivered')
        } 
        if(status == 3) {
          return this.$t('shareholder.status')
        } 
      }
    },
    orderShareText() {
      return source => {
        if (source == 1) {
          return '一级分销'
        }
        if (source == 2) {
          return '二级分销'
        }
        if (source == 3) {
          return '三级分销'
        }
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.orderItem {
  width: 100%;
  padding: 30rpx;
  font-family: PingFang SC;
  background-color: #fff;
  color: #262626;
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text:nth-child(1) {
      font-size: 28rpx;
      font-weight: 600;
    }
    text:nth-child(2) {
      font-size: 24rpx;
      color: #f0250e;
    }
    .complete {
      color: #8c8c8c;
    }
  }
  .goods {
    padding-top: 6rpx;
    .goodItem {
      display: flex;
      padding: 24rpx;
      border-bottom: 1px solid #f8f8f8;
      .pic {
        width: 140rpx;
        min-width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background-color: #f1f1f1;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        margin-left: 20rpx;
        .name {
          font-size: 28rpx;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .sku {
          display: flex;
          align-items: center;
          justify-content: space-between;
          text:nth-child(2) {
            font-size: 24rpx;
            color: #8c8c8c;
          }
        }
      }
    }
    .showMore {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #8c8c8c;
      margin-bottom: 30rpx;
      justify-content: center;
    }
    .goodItem:last-child {
      border-bottom: none;
    }
  }
  .foot {
    padding-top: 20rpx;
    border-top: 1px solid #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .money {
      font-size: 26rpx;
      .red {
        color: #f0250e;
        font-weight: 600;
      }
    }
    .status {
      font-size: 26rpx;
      color: #8c8c8c;
    }
    .status.red {
      color: #f0250e;
    }
  }
}
</style>